<template>
	<view>
		<u-navbar title="洗车" bgColor="#3083FB" titleStyle="color:#fff" left-icon-color="#fff" :autoBack="true"
			placeholder></u-navbar>
		<view class="bgc"></view>
		<view class="body">
			<view class="headerImage">
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<view class="header">
				<view class="headerLeft">
					车百事汽车生活馆
				</view>
			</view>
			<view class="center">
				<u-rate :count="count" :value="current" :readonly="true"></u-rate>
				<text>{{current}}分</text>
				<text class="salesVolume">销量：</text>
			</view>
			<view class="bottom">
				<view>
					营业时间:周一至周五 早上8:00-晚上22:00
				</view>
				<view>
					位置：山阳区人民路与解放路交叉口
				</view>
			</view>
		</view>

		<view class="body">
			<view>
				<text class="bodyTitle">服务项目</text>
			</view>
			<view class="project">
				<view>
					工时价格（每小时）
				</view>
				<view>
					<text class="newNumber">￥35.9 </text><text class="oldNumber">￥60 </text>
				</view>
			</view>
			<u-line color="red" />
			<view class="project">
				<view>
					轮胎
				</view>
				<view>
					<text class="newNumber">￥35.9 </text><text class="oldNumber">￥60 </text>
				</view>
			</view>
			<u-line color="red" />
			<view class="project">
				<view>
					...
				</view>
				<view>
					<text class="newNumber">￥35.9 </text><text class="oldNumber">￥60 </text>
				</view>
			</view>
			<u-line color="red" />
		</view>

		<view class="body">
			<text class="bodyTitle">服务评价</text>
			<view class="evaluate">
				<u-avatar :src="src" size="96rpx"></u-avatar>
				<view class="evaluateRight">
					<view class="evaluateRight-top">
						<text>黄**</text>
						<text>2022-12-31</text>
					</view>
					<view>
						<u-rate :count="userCount" :value="userCurrent" :readonly="true"></u-rate>
					</view>
					<text>
						洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车!!!
					</text>
				</view>
			</view>
			<u-line color="red" />
			<view class="evaluate">
				<u-avatar :src="src" size="96rpx"></u-avatar>
				<view class="evaluateRight">
					<view class="evaluateRight-top">
						<text>黄**</text>
						<text>2022-12-31</text>
					</view>
					<view>
						<u-rate :count="userCount" :value="userCurrent" :readonly="true"></u-rate>
					</view>
					<text>
						洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车!!!
					</text>
				</view>
			</view>
			<u-line color="red" />
		</view>
		<view class="footer">
		<u-button type="primary" shape="circle">立即预约</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				current: 3,
				userCount: 5,
				userCurrent: 4,
				src: '/static/logo.png',
				// text: '无头像'
			};
		}
	}
</script>

<style lang="scss">
	.bgc {
		background-color: #3083FB;
		height: 300rpx;
		margin-top: -6rpx;
		padding-top: 6rpx;
		margin-bottom: -280rpx;
	}

	.body {
		background-color: #fff;
		padding: 30rpx;
		width: 85%;
		margin: 0 auto;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}

	.headerImage {
		border: 1px solid red;
		margin-bottom: 20rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
	}

	.headerLeft {
		font-size: 36rpx;
		font-weight: bold
	}

	.center {
		display: flex;
		justify-content: flex-start;
		margin: 10rpx 0;
	}

	.salesVolume {
		margin-left: 20rpx;
	}

	.bottom {
		font-size: 26rpx;
	}

	.bottom view {
		margin: 10rpx;
	}

	.bodyTitle {
		font-size: 38rpx;
		font-weight: bold;
	}

	.project {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.newNumber {
		font-size: 44rpx;
		color: #ff3a00;
		margin-right: 20rpx;
	}

	.oldNumber {
		color: #848484;
		text-decoration: line-through
	}

	.evaluate {
		display: flex;
		margin: 30rpx 0;
	}
	.evaluateRight{
		margin-left: 20rpx;
	}
	.evaluateRight text{
		font-size: 30rpx;
	}
	.evaluateRight-top{
		display: flex;
		justify-content: space-between;
	}
	.footer{
		background-color: #fff;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		width: 100%;
		position:fixed;
		bottom:0;
	}
</style>